<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机传感器检测</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .sensor-card {
            border: 1px solid #ccc;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
        }
        .supported { color: green; }
        .not-supported { color: red; }
        .data-box {
            background: #f5f5f5;
            padding: 10px;
            margin-top: 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>手机传感器检测</h1>
    <div id="sensorList"></div>

    <script>
        const sensors = [
            { id: 'accelerometer', name: '加速度传感器', event: 'devicemotion' },
            { id: 'gyroscope', name: '陀螺仪', event: 'devicemotion' },
            { id: 'orientation', name: '方向传感器', event: 'deviceorientation' },
            { id: 'light', name: '环境光传感器', event: 'devicelight' },
            { id: 'proximity', name: '接近传感器', event: 'deviceproximity' },
            { id: 'magnetometer', name: '磁力计', event: 'devicemotion' },
            { id: 'geo', name: '地理位置', event: 'geolocation' }
        ];

        function createSensorCard(sensor) {
            const card = document.createElement('div');
            card.className = 'sensor-card';
            card.innerHTML = `
                <h3>${sensor.name}</h3>
                <div>支持状态: <span class="status">检测中...</span></div>
                <div class="data-box"></div>
            `;
            return card;
        }

        function checkSensors() {
            const sensorList = document.getElementById('sensorList');
            
            sensors.forEach(sensor => {
                const card = createSensorCard(sensor);
                sensorList.appendChild(card);
                
                const statusSpan = card.querySelector('.status');
                const dataBox = card.querySelector('.data-box');

                try {
                    switch(sensor.id) {
                        case 'accelerometer':
                            if ('DeviceMotionEvent' in window) {
                                window.addEventListener('devicemotion', (e) => {
                                    statusSpan.className = 'supported';
                                    statusSpan.textContent = '已支持';
                                    dataBox.innerHTML = `
                                        X: ${e.acceleration.x?.toFixed(2)}<br>
                                        Y: ${e.acceleration.y?.toFixed(2)}<br>
                                        Z: ${e.acceleration.z?.toFixed(2)}
                                    `;
                                });
                            } else {
                                throw new Error('不支持');
                            }
                            break;

                        case 'gyroscope':
                            if ('DeviceMotionEvent' in window) {
                                window.addEventListener('devicemotion', (e) => {
                                    statusSpan.className = 'supported';
                                    statusSpan.textContent = '已支持';
                                    dataBox.innerHTML = `
                                        旋转速率X: ${e.rotationRate?.alpha?.toFixed(2)}<br>
                                        旋转速率Y: ${e.rotationRate?.beta?.toFixed(2)}<br>
                                        旋转速率Z: ${e.rotationRate?.gamma?.toFixed(2)}
                                    `;
                                });
                            } else {
                                throw new Error('不支持');
                            }
                            break;

                        case 'orientation':
                            if ('DeviceOrientationEvent' in window) {
                                window.addEventListener('deviceorientation', (e) => {
                                    statusSpan.className = 'supported';
                                    statusSpan.textContent = '已支持';
                                    dataBox.innerHTML = `
                                        Alpha: ${e.alpha?.toFixed(2)}<br>
                                        Beta: ${e.beta?.toFixed(2)}<br>
                                        Gamma: ${e.gamma?.toFixed(2)}
                                    `;
                                });
                            } else {
                                throw new Error('不支持');
                            }
                            break;

                        case 'light':
                            if ('ondevicelight' in window) {
                                window.addEventListener('devicelight', (e) => {
                                    statusSpan.className = 'supported';
                                    statusSpan.textContent = '已支持';
                                    dataBox.textContent = `光照强度: ${e.value} lux`;
                                });
                            } else {
                                statusSpan.className = 'not-supported';
                                statusSpan.textContent = '不支持';
                            }
                            break;

                        case 'proximity':
                            if ('ondeviceproximity' in window) {
                                window.addEventListener('deviceproximity', (e) => {
                                    statusSpan.className = 'supported';
                                    statusSpan.textContent = '已支持';
                                    dataBox.innerHTML = `
                                        距离: ${e.value} cm<br>
                                        最大检测距离: ${e.max} cm
                                    `;
                                });
                            } else {
                                statusSpan.className = 'not-supported';
                                statusSpan.textContent = '不支持';
                            }
                            break;

                        case 'geo':
                            if ('geolocation' in navigator) {
                                navigator.geolocation.getCurrentPosition((position) => {
                                    statusSpan.className = 'supported';
                                    statusSpan.textContent = '已支持';
                                    dataBox.innerHTML = `
                                        纬度: ${position.coords.latitude}<br>
                                        经度: ${position.coords.longitude}<br>
                                        海拔: ${position.coords.altitude || 'N/A'} m
                                    `;
                                });
                            } else {
                                statusSpan.className = 'not-supported';
                                statusSpan.textContent = '不支持';
                            }
                            break;
                    }
                } catch (error) {
                    statusSpan.className = 'not-supported';
                    statusSpan.textContent = '不支持';
                }
            });
        }

        // 需要用户交互才能启动传感器检测
        document.body.addEventListener('click', () => {
            checkSensors();
        }, { once: true });

        // 初始提示
        const prompt = document.createElement('div');
        prompt.textContent = '点击页面任意位置开始检测传感器...';
        prompt.style.color = '#666';
        prompt.style.margin = '20px 0';
        sensorList.before(prompt);
    </script>
</body>
</html>